<template>
	<view class="rui-container">
		<view class="rui-user">
			<view class="rui-user_info">
				<view class="rui-user_info_icon">
					<rui-icons icon="user" size="38" color="#ddd"></rui-icons>
				</view>
				<view class="rui-user_info_name">
					捣蛋小鸟
				</view>
			</view>

			<view class="rui-user_logout">
				退出登录
			</view>
		</view>
		<view class="rui-menu">
			<view class="rui-menu_item" @click="to('pages/tabbar/shop/shop')">
				<view class="rui-menu_item_name">
					到店取
				</view>
				<view class="rui-menu_item_desc">
					提前下单免排队
				</view>
			</view>
			<view class="rui-menu_item">
				<view class="rui-menu_item_name">
					喜外送
				</view>
				<view class="rui-menu_item_desc">
					随时送喜到家
				</view>
			</view>
		</view>
		<view class="rui-nav">
			<view class="rui-nav_item">
				<view class="rui-nav_item_icon">
					<rui-icons icon="purchase" size="45"></rui-icons>
				</view>
				<view class="rui-nav_item_name">
					大单采购
				</view>
				<view class="rui-nav_item_desc">
					宴请采购多重折扣
				</view>
			</view>
			<view class="rui-nav_item">
				<view class="rui-nav_item_icon">
					<rui-icons icon="group" size="45"></rui-icons>
				</view>
				<view class="rui-nav_item_name">
					喜友社群
				</view>
				<view class="rui-nav_item_desc">
					解锁社群专享折扣
				</view>
			</view>
			<view class="rui-nav_item">
				<view class="rui-nav_item_icon">
					<rui-icons icon="invite" size="45"></rui-icons>
				</view>
				<view class="rui-nav_item_name">
					邀请好礼
				</view>
				<view class="rui-nav_item_desc">
					邀友立享多重好礼
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	const to = (url) => {
		uni.navigateTo({
			url: "/pages/shop/index/index"
		})
	}
</script>

<style lang="scss" scoped>
	.rui-container {
		background: #fff;
		margin-top: -60px;
		margin-left: 30rpx;
		position: relative;
		z-index: 9;

	}

	.rui-user {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_info {
			display: flex;
			align-items: center;

			&_name {
				margin-left: 10rpx;
			}
		}

		&_logout {
			font-size: 22rpx;
			color: #999;
			border: 1rpx solid #eee;
			border-radius: 30rpx;
			padding: 6rpx 15rpx;
		}
	}

	.rui-nav {
		display: flex;
		justify-content: space-between;


		&_item {
			text-align: center;
			padding: 20px;

			&:active {
				color: #f30;
			}

			&_name {
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			&_desc {
				font-size: 20rpx;
				color: #999;
			}
		}
	}

	.rui-menu {
		display: flex;
		justify-content: space-between;
		padding: 60rpx 0 40rpx;

		&_item {
			width: 50%;
			text-align: center;

			&:active {
				color: #f30;
			}

			&:last-child {
				border-left: 1rpx solid #eee;
			}

			&_name {
				font-size: 44rpx;
			}

			&_desc {
				color: #999;
				font-size: 22rpx;
				margin-top: 6rpx;
			}
		}
	}
</style>